<template>
  <div>
    <el-dialog title="修改业务类型" :visible.sync="isShow" width="800px" :close-on-click-modal="false" @close="closeUserMod"
      @open="openUpdate">
      <div v-loading="loading">
         <el-card>
            <el-form size="mini" ref="newUserDate" :model="newUserDate" :rules="rules" inline label-width="140px"
              label-position="left">
              <el-row :gutter="10">
                   <el-col :span="12">
                  <el-form-item prop="DataKey"  label="键值">
                    <el-input  v-model="newUserDate.DataKey" :disabled="true" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="DataKeyVal"  label="意义">
                    <el-input  v-model="newUserDate.DataKeyVal"  ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        <div style="text-align:right;margin:20px 0">
          <el-button size="mini" @click="cancleUserMod">取消</el-button>
          <el-button type="primary" @click="confirm" size="mini">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import toolBox from "@/common/utils/toolBox";
import request from "@/common/utils/request";
import update from "@/message/basicmanagement/datadictionary/data-dictionary-update";
export default {
  name: "",
  data() {
    return {
      loading: false,
      newUserDate: {
        //表单信息
        DataKey: "",
        DataKeyVal: ""
      },
      rules: {
        //表单校验规则
        DataKey: [
          {
            required: true,
            message: "键值不能为空",
            trigger: "change"
          }
        ],
        DataKeyVal: [
          {
            required: true,
            message: "意义不能为空",
            trigger: "change"
          }
        ]
      }
    };
  },
  props: {
    //父元素传递的数据
    optionUpdate: Object
  },
  computed: {
    isShow: {
      //修改用户弹窗是否显示
      get: function() {
        return this.optionUpdate.isShow;
      },
      set: function(newValue) {
        this.optionUpdate.isShow = newValue;
      }
    }
  },
  methods: {
    openUpdate() {
      //打开弹窗事件
      console.log(this.optionUpdate.currentRow);
      this.newUserDate.DataKey = this.optionUpdate.currentRow[0].DataKeyVal;
      this.newUserDate.DataKeyVal = this.optionUpdate.currentRow[0].Meaning;
    },
    cancleUserMod() {
      //关闭弹窗事件，清楚表单验证
      this.optionUpdate.isShow = false;
      this.$refs.newUserDate.clearValidate();
    },
    closeUserMod() {
      //修改弹窗关闭
      this.$refs.newUserDate.clearValidate();
    },
    confirm() {
      //修改用户
      this.$refs["newUserDate"].validate(valid => {
        if (valid) {
          let resBody = new update();
          resBody.data.DataKeyVal = this.newUserDate.DataKey;
          resBody.data.Meaning = this.newUserDate.DataKeyVal;
          resBody.data.DictID = this.optionUpdate.currentRow[0].DictID;
          resBody.data.DataKey = this.optionUpdate.currentRow[0].DataKey;
          resBody.data.PreserveFlag = this.optionUpdate.currentRow[0].PreserveFlag;
          request(resBody)
            .then(response => {
              if (response.SYS_HEAD.ReturnCode === "000000") {
                this.loading = false;
                this.$message({
                  type: "success",
                  message: "修改成功!"
                });
                this.optionUpdate.isShow = false;
                this.$emit("refreshTable"); //修改用户成功并刷新表格数据
              } else {
                this.loading = false;
              }
            })
            .catch(error => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
}

.require {
  color: red;
}

.dialog-text {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: red;
  font-size: 18px;
}

.role {
  width: 95%;
  border: 1px solid #eee;
  border-radius: 4px;
  height: 290px;

  .roleHeader {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    background: #f5f7fa;
    height: 42px;
    box-sizing: border-box;
    padding: 9px;
    overflow-y: auto;
  }
}

.el-dialog__body {
  padding: 20px;
  padding-top: 10px;
}

.el-card {
  overflow: inherit;
}
</style>
